<div class="animated fadeIn">
  <div class="row">
    <div class="col-12">
      <div class="card email-app">
        <nav>
            <a href="#" class="btn btn-danger btn-block">New Email</a>

            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-inbox"></i> Inbox <span class="badge badge-danger">4</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-star"></i> Stared</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-rocket"></i> Sent</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-trash-o"></i> Trash</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-bookmark"></i> Important<span class="badge badge-info">5</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-inbox"></i> Inbox <span class="badge badge-danger">4</span></a>
                </li>
            </ul>
        </nav>

        <main>
            <div class="toolbar">
                <span class="btn-group">
                    <button type="button" class="btn btn-secondary"><span class="fa fa-envelope"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-star"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-star-o"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-bookmark-o"></span></button>
                </span>

                <span class="btn-group">
                    <button type="button" class="btn btn-secondary"><span class="fa fa-mail-reply"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-mail-reply-all"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-mail-forward"></span></button>
                </span>

                <button type="button" class="btn btn-secondary"><span class="fa fa-trash-o"></span></button>

                <span class="btn-group">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"><span class="fa fa-tags"></span> <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">add label <span class="badge badge-danger"> Home</span></a></li>
                        <li><a href="#">add label <span class="badge badge-info">Job</span></a></li>
                        <li><a href="#">add label <span class="badge badge-success">Clients</span></a></li>
                        <li><a href="#">add label <span class="badge badge-warning">News</span></a></li>
                    </ul>
                </span>

                <span class="btn-group float-right">
                    <button type="button" class="btn btn-secondary"><span class="fa fa-chevron-left"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-chevron-right"></span></button>
                </span>
            </div>

            <ul class="messages-list">

                <li class="unread">
                    <a ui-sref="app.uikits.email.compose">
                        <div class="header">
                            <span class="action"><i class="fa fa-square-o"></i></span>
                            <span class="from">Lukasz Holeczek</span>
                            <span class="date"><span class="fa fa-paper-clip"></span> Today, 3:47 PM</span>
                        </div>
                        <div class="title">
                            <span class="action"><i class="fa fa-star-o"></i></span>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        </div>
                        <div class="description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>
                    </a>
                </li>

                <li>
                    <a ui-sref="app.uikits.email.compose">
                        <div class="header">
                            <span class="action"><i class="fa fa-square-o"></i></span>
                            <span class="from">Lukasz Holeczek</span>
                            <span class="date"><span class="fa fa-paper-clip"></span> Today, 3:47 PM</span>
                        </div>
                        <div class="title">
                            <span class="action"><i class="fa fa-star-o"></i></span>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </div>
                        <div class="description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>
                    </a>
                </li>

                <li>
                    <a ui-sref="app.uikits.email.compose">
                        <div class="header">
                            <span class="action"><i class="fa fa-square-o"></i></span>
                            <span class="from">Lukasz Holeczek</span>
                            <span class="date">Today, 3:47 PM</span>
                        </div>
                        <div class="title">
                            <span class="action"><i class="fa fa-star-o"></i></span>
                            Lorem ipsum dolor sit amet.
                        </div>
                        <div class="description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>
                    </a>
                </li>

                <li class="unread">
                    <a ui-sref="app.uikits.email.compose">
                        <div class="header">
                            <span class="action"><i class="fa fa-square-o"></i></span>
                            <span class="from">Lukasz Holeczek</span>
                            <span class="date">Today, 3:47 PM</span>
                        </div>
                        <div class="title">
                            <span class="action"><i class="fa fa-star-o"></i></span>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        </div>
                        <div class="description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>
                    </a>
                </li>

                <li class="unread">
                    <a ui-sref="app.uikits.email.compose">
                        <div class="header">
                            <span class="action"><i class="fa fa-square-o"></i></span>
                            <span class="from">Lukasz Holeczek</span>
                            <span class="date">Today, 3:47 PM</span>
                        </div>
                        <div class="title">
                            <span class="action"><i class="fa fa-star-o"></i></span>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </div>
                        <div class="description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>

                    </a>
                </li>

                <li>
                    <a ui-sref="app.uikits.email.compose">
                        <div class="header">
                            <span class="action"><i class="fa fa-square-o"></i></span>
                            <span class="from">Lukasz Holeczek</span>
                            <span class="date">Today, 3:47 PM</span>
                        </div>
                        <div class="title">
                            <span class="action"><i class="fa fa-star-o"></i></span>
                            Lorem ipsum dolor sit amet.
                        </div>
                        <div class="description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>
                    </a>
                </li>

                <li class="unread">
                    <a ui-sref="app.uikits.email.compose">
                        <div class="header">
                            <span class="action"><i class="fa fa-square-o"></i></span>
                            <span class="from">Lukasz Holeczek</span>
                            <span class="date">Today, 3:47 PM</span>
                        </div>
                        <div class="title">
                            <span class="action"><i class="fa fa-star-o"></i></span>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        </div>
                        <div class="description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>
                    </a>
                </li>

                <li>
                    <a ui-sref="app.uikits.email.compose">
                        <div class="header">
                            <span class="action"><i class="fa fa-square-o"></i></span>
                            <span class="from">Lukasz Holeczek</span>
                            <span class="date">Today, 3:47 PM</span>
                        </div>
                        <div class="title">
                            <span class="action"><i class="fa fa-star-o"></i></span>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </div>
                        <div class="description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>
                    </a>
                </li>

                <li>
                    <a ui-sref="app.uikits.email.compose">
                        <div class="header">
                            <span class="action"><i class="fa fa-square-o"></i></span>
                            <span class="from">Lukasz Holeczek</span>
                            <span class="date">Today, 3:47 PM</span>
                        </div>
                        <div class="title">
                            <span class="action"><i class="fa fa-star-o"></i></span>
                            Lorem ipsum dolor sit amet.
                        </div>
                        <div class="description">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>
                    </a>
                </li>
            </ul>
        </main>
      </div>
    </div>
  </div>
</div>
